pp108 : Organization Level Styling and BASE Relative URLs

Organization Level Styling and BASE Relative URLs

Process Platform Web front end is multitenant aware; that is, the Web content can be deployed in an organization that allows, for example, a different style for that organization. Each tenant is provided with its own corporate styling even though the same application is used by all the tenants. With multitenant aware, the developers now can develop, publish, and debug their own version of, for example, a javascript without other developers undoing their changes while publishing their content.

Organization-Specific Web content

The Web content deployed to a specific Organization is stored in a different folder from the Web content deployed to the Shared level. In the earlier versions of Process Platform, all the Web content was deployed to a folder <cordys-Instance>/Web, which is changed to a folder named <cordys-Instance>/webroot in this version. This webroot folder has a Shared folder and an Organization folder. The Organization folder contains a folder per organization along with its name. When the Web content is deployed or published to the Organization level, it is copied to the organization-specific subfolder.

The Web server is made multitenant aware so that when it serves the Web content, the Organization level is verified for the content first and the Shared level later. The Web content in the organization folder is served whenever it is available. Therefore, when an image in a certain URL is available in both the Shared and Organization levels, the Organization level image is served to the front end.

From Absolute to BASE Relative URLs

In the earlier version, Process Platform used absolute URLs, where the URL is the complete folder structure from the hostname to the actual file name. The following is the example of a script and a style sheet loaded through an absolute URL: 
<head> <script src="/cordys/wcp/application.js"></script> <link rel="stylesheet" href="/cordys/wcp/style/default.css"></link>

BASE URL

To support a multitenant Web content, the organization name is made a part of the URL; for example, https://bopserver.cordys.com/home/acme, where acme is the organization name. The organization is a part of the URL, which means that the URLs cannot be used as absolute; otherwise, the URL will be as specified above with the /home/acme part in it. This is solved by introducing the use of base relative URLs. The base relative URLs are the URLs that are relative to the BASE URL. The BASE URL of a Process Platform page is the URL including the organization name; for example, https://bopserver.cordys.com/home/acme is referred as the < organization URL>. The URLs used in forms, HTML pages, and Javascript are relative to this organization name including the BASE URL. This behavior is available by using the BASE element. Refer to BASE element for more information. It is an HTML tag that can be added to the HEAD tag as specified in the following example from W3C:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Our Products</TITLE> <BASE href="http://www.aviary.com/products/intro.html"> </HEAD>

BASE element and application. js

The BASE element is set when a form is generated in the run time. Thereon, all the URLs are relative to the new BASE URL. For the HTML files, the BASE element is not added as these are not generated. It is set by the application.js script that is loaded in every Process Platform HTML application; that is, until the application.js script is loaded, the URLs are handled as relative URLs. This has implications for the URL used to load the application.js script. The script must have a URL relative to the page loading it. The following example displays the usage of relative URL in the application.js from a page with the URL: <organizationURL>/com/cordys/mypage.htm:

 

<head> <script src="../../wcp/application.js"></script>

Referring to other Web content

When using the XForms designer, the management of the above URL is handled by the XForms engine. Also, while adding a Javascript, image, or stylesheet to the form, the developer need not worry about the BASE relative URL.
In case the developer uses Javascript to refer to an image or another form, then the above action is needed as the scripts are not changed by the XForms engine. When developing an application in the pure HTML, the developer must handle the URLs. The following rules determine which URL must be used:
  • URLs from Javascript are required to be relative to the BASE URL; they can be URLs to Javascript, images, other forms, stylesheets, and so on. There is no difference between the Javascript included in a Form or HTML and the Javascript included in a separate JS file. The BASE URL is the path including the organization name, for example, https://bopserver.cordys.com/home/acme , called the < organization URL>.
  • URLs within an HTML element are required to be relative to the BASE URL. For example, the URL in the src attribute of an image element is required to be relative to the < organization URL>.
  • URLs within a Cascading Style Sheets(CSS) are required to be handled differently. The CSS does not support the BASE relative mechanism. Therefore, the URLs within a CSS must be relative to the CSS file itself.

Examples

The following sections provide the examples for the URLs referenced from a page accessed through the URL: < organization URL >/com/cordys/mypage.htm

Including a JS file

The following example provides the URL to a JS file in the folder <Web Content Folder >/com/cordys/js/utils.js:

<script src="com/cordys/js/utils.js" type="text/javascript"/>

Note: The URL provided is relative to the BASE URL.

Linking a CSS file

The following example provides the URL to a CSS file in the folder <Web Content Folder >/com/cordys/css/style.css:

<link rel="stylesheet" href="com/cordys/css/style.css" >

Note: The URL is relative to the BASE URL.

Reference to an image file

The following example provides the URL to an image in the folder <Web Content Folder >/com/cordys/img/logo.png:

<img src="com/cordys/img/logo.png" >

Note: The URL is relative to the BASE URL.

Special care with URLs from CSS

As mentioned earlier, the CSS does not support the base relative URLs. The URLs are formed to be relative to the CSS file. The following example contains the usage of a URL with a CSS file accessed through the < organization URL>/com/cordys/css/style.css

Reference to an image file

The following example provides the URL to an image in the folder <Web Content Folder >/com/cordys/img/logo.png:

background-image: url( "../img/logo.png" )

Note: The URL is relative to the CSS itself.

Reference to another CSS file

The following example provides the URL to import another CSS file in the folder <Web Content Folder >/com/cordys/css/acme/customer.css

@import url( "acme/logo.png" )

Note: The URL is relative to the CSS itself.

Upgrading an existing Web content

The Web content with multitenant support provides new capabilities. Also, the existing content still works with the 'absolute path'. To make an existing Web content multitenant aware, it must be updated. Refer to Correcting Absolute and Relative Paths in Web Artifacts on how to update the existing Web content.

 

 

Related Topics